<template>
  <div>
    <a-card class="card-header">
      <a-form-model :model="model">
        <a-row :gutter="24">
          <a-col :span="5">
            <a-form-model-item
              label="仓库名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-model.trim="model.id" @change="handleWareChange">
                <a-select-option v-for="item in Option" :key="item.id">
                  {{ item.wareHouseName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <!-- 主体区域 -->
    <a-card class="card-content" v-if="model.id">
      <a-tabs @change="handleLocationChange" v-model="current">
        <a-tab-pane v-for="(item, index) in locationData" :key="index">
          <div slot="tab" class="tabBox">
            <div
              class="tag"
              :style="{
                color: caseColor(item.status),
                background: caseColor(item.status),
                border: `1px solid ${caseColor(item.status)}`,
              }"
            ></div>
            货区编号 {{ item.serialNumber }}
            <a-icon type="edit" @click.stop="handleEdit(item)" />
          </div>
        </a-tab-pane>
        <a-button type="primary" slot="tabBarExtraContent" @click="handleAdd">
          新增货区
        </a-button>
      </a-tabs>
      <a-row v-if="locationData.length > 0">
        <a-col :span="2">
          <a-button type="primary" @click="handleCargoAdd">新增货架</a-button>
        </a-col>
        <a-col :span="12">
          <div class="categoryBox flex flex-a-c">
            <div
              class="categoryItem flex flex-a-c"
              v-for="(item, index) in categoryList"
              :key="index"
            >
              <div
                class="tag"
                :style="{
                  color: item.color,
                  background: item.color,
                  border: `1px solid ${item.color}`,
                }"
              ></div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </a-col>
      </a-row>
      <br />
      <!-- 货架区域 -->
      <a-row :gutter="24" v-if="locationData.length > 0">
        <a-col span="4" v-for="(item, index) in cargoData" :key="index">
          <div class="cargoBox">
            <div class="cargo_header flex flex-a-c flex-j-s-b">
              <div>
                <span> 编号 {{ item.serialNumber }}</span>
                <a-icon type="edit" @click.stop="handleCargoEdit(item)" />
              </div>
              <div class="flex flex-a-c ">
                <div
                  class="tag"
                  :style="{
                    color: caseColor(item.status),
                    background: caseColor(item.status),
                    border: `1px solid ${caseColor(item.status)}`,
                  }"
                ></div>
                <a-popconfirm
                  v-if="item.status === 0"
                  okText="确定"
                  cancelText="取消"
                  title="确定删除吗?"
                  @confirm="() => handleCargoDelete(item)"
                >
                  <a-icon
                    class="cursor"
                    type="close"
                    :style="{ color: '#909090' }"
                  />
                </a-popconfirm>
              </div>
            </div>
            <div
              class="cargo_content flex flex-a-c flex-j-s-b cursor"
              @click="handleShelves(item)"
            >
              <div>
                <div class="number">{{ item.rowLine }}</div>
                <div class="cargo_name">货架行数</div>
              </div>
              <a-divider type="vertical" />
              <div>
                <div class="number">{{ item.col }}</div>
                <div class="cargo_name">货架列数</div>
              </div>
            </div>
          </div>
          <br />
        </a-col>
      </a-row>
    </a-card>
    <!-- 货区弹框 -->
    <WareLocationModal :stockId="stockId" ref="modalForm" @ok="modalFormOk" />
    <!-- 货架弹框 -->
    <WareCargoModal
      ref="Cargo"
      :stockAreaId="stockAreaId"
      @ok="modalCargoFormOk"
    />
  </div>
</template>

<script>
import WareLocationModal from "./components/WareLocationModal.vue";
import WareCargoModal from "./components/WareCargoModal.vue";
import api from "@/api/apiServer";
import { caseColor } from "./components/tableConfig";
export default {
  components: { WareLocationModal, WareCargoModal },
  data() {
    return {
      labelCol: {
        xl: { span: 8 },
        xxl: { span: 8 },
      },
      wrapperCol: {
        xl: { span: 16 },
        xxl: { span: 16 },
      },
      Option: [], // 仓库管理数据源
      stockId: null, // 仓库id
      stockAreaId: null, // 货区id
      wareHouseName: "仓库名称",
      model: {
        pageNumber: 1,
        pageSize: 99999,
      },
      categoryList: [
        { name: "空闲", color: "#22AC38" },
        { name: "满仓", color: "#EC3838" },
        { name: "空仓", color: "#2465FF" },
        { name: "禁用", color: "#D2D2D2" },
      ],
      locationData: [], // 货区数据源
      cargoData: [], // 货区数据源
      locationName: "", // 货区编号
      current: 0,
    };
  },
  created() {
    this.getOption(1);
  },
  methods: {
    caseColor,
    // 获取货区数据
    async getLocationList() {
      const res = await api.InstockDetail(this.model);
      this.locationData = res.data.data;
      if (this.locationData.length > 0) {
        this.stockAreaId = this.locationData[this.current].id;
        this.locationName = res.data.data[0].serialNumber;
        this.getCargoList();
      }
    },
    // 获取货架数据
    async getCargoList() {
      let params = { id: this.stockAreaId, pageNumber: 1, pageSize: 99999 };
      const res = await api.StockAreaDetail(params);
      this.cargoData = res.data.data;
    },
    // 获取仓库选择器的数据
    async getOption(arg) {
      const params = { pageNumber: 1, pageSize: 99999, deleteFlag: "N" };
      const res = await api.wareHousePage(params);
      this.Option = res.data.data;
      if (this.Option.length > 0) {
        if (arg === 1) {
          this.$set(this.model, "id", this.Option[0].id);
          this.stockId = this.Option[0].id;
          this.wareHouseName = this.Option[0].wareHouseName;
        }
        this.getLocationList();
      }
    },
    // 仓库变化事件
    handleWareChange(value) {
      this.stockId = value;
      this.cargoData = [];
      this.current = 0;
      this.stockAreaId = null;
      this.wareHouseName = this.Option.find(
        (item) => item.id === value
      ).wareHouseName;

      this.getLocationList();
    },
    // 货区变化事件
    handleLocationChange(index) {
      this.current = index;
      this.stockAreaId = this.locationData[index].id;
      this.locationName = this.locationData[index].serialNumber;
      this.getCargoList();
    },
    modalFormOk() {
      this.getLocationList();
    },
    modalCargoFormOk() {
      this.getCargoList();
    },
    // 货区新增
    handleAdd() {
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.modalAdd();
    },
    // 货架新增
    handleCargoAdd() {
      this.$refs.Cargo.title = "新增";
      this.$refs.Cargo.modalAdd();
    },
    //  货区编辑
    handleEdit(record) {
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.modalEdit(record);
    },
    //  货架编辑
    handleCargoEdit(record) {
      this.$refs.Cargo.title = "编辑";
      this.$refs.Cargo.modalEdit(record);
    },
    handleShelves(record) {
      let { id, serialNumber, rowLine, col } = record;
      this.$router.push({
        path: "/warehouse/shelves",
        query: {
          shelfAreaId: id,
          serialNumber,
          rowLine,
          col,
          wareHouseName: this.wareHouseName,
          locationName: this.locationName,
        },
      });
    },
    // 货架删除
    async handleCargoDelete(record) {
      let { id } = record;
      const res = await api.ShelfAreaDelete({ id });
      if (res.code === 200) {
        this.$message.success(res.message);
        this.getCargoList();
      } else {
        this.$message.error(res.message);
      }
    },
    handleDetail(record) {
      let { id, serialNumber } = record;
      this.$router.push({
        path: `/warehouse/cargo?id=${id}&serialNumber=${serialNumber}&locationName=${locationName}&wareHouseName=${wareHouseName}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 20px;
  }
}
::v-deep .ant-tree-node-content-wrapper {
  width: 90%;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
.locationBox {
  width: 31%;
  height: 150px;
  border: 1px solid #333;
  margin: 1.1%;
  display: flex;
  align-items: center;
  .serialNumber {
    width: 90%;
    padding-left: 50%;
  }
  .location_action {
    width: 10%;
    display: flex;
    flex-direction: column;
    div {
      padding: 100px;
      height: 30px;
    }
  }
}
.cargoBox {
  width: 100%;
  height: 126px;
  // border: 1px solid #1a5eff;
  border: 1px solid rgba(26, 94, 255, 0.3);
  box-shadow: 2px 2px 3px 0px rgba(0, 26, 138, 0.14);
  border-radius: 4px;

  .cargo_header {
    height: 36px;
    background: rgba(26, 94, 255, 0.1);
    border-radius: 4px;
    padding: 0 15px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #1a5eff;
  }
  .cargo_content {
    padding: 20px 34px;
    text-align: center;
    .number {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 600;
      color: #1a5eff;
    }
    .cargo_name {
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
    }
    .ant-divider,
    .ant-divider-vertical {
      height: 40px;
    }
  }
}
.cargoBox:hover {
  border: 1px solid rgba(26, 94, 255, 1);
}
.categoryBox {
  width: 50%;
  padding: 6px 25px 8px 25px;
  .categoryItem {
    width: 70px;
  }
}
.tag {
  width: 13px;
  height: 13px;
  opacity: 0.5;
  border-radius: 4px;
  margin-right: 5px;
}
.tabBox {
  display: flex;
  align-items: center;
}
::v-deep .ant-tabs-nav {
  height: 45px !important;
}
.cursor {
  cursor: pointer;
}
</style>
